<!DOCTYPE html>
<html>

	<head>
		<title>Overlay example</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>
		<style>
			#marker {
			  width: 20px;
			  height: 20px;
			  border: 1px solid #088;
			  border-radius: 10px;
			  background-color: #0FF;
			  opacity: 0.5;
			}
			#vienna {
			  text-decoration: none;
			  color: white;
			  font-size: 11pt;
			  font-weight: bold;
			  text-shadow: black 0.1em 0.1em 0.2em;
			}
			.popover-content {
			  min-width: 180px;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
				</div>
			</div>
			<div style="display: none;">
				<!-- Clickable label for Vienna -->
				<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
				<div id="marker" title="Marker"></div>
				<!-- Popup -->
				<div id="popup" title="Welcome to ol3"></div>
			</div>

		</div>
		<script>
			var layer = new ol.layer.Tile({
				source: new ol.source.MapQuest({
					layer: 'sat'
				})
			});
			var map = new ol.Map({
				layers: [layer],
				target: 'map',
				view: new ol.View({
					center: [0, 0],
					zoom: 2
				})
			});
			var pos = ol.proj.fromLonLat([16.3725, 48.208889]);
			 // Vienna marker
			var marker = new ol.Overlay({
				position: pos,
				positioning: 'center-center',
				element: document.getElementById('marker'),
				stopEvent: false
			});
			map.addOverlay(marker);
			 // Vienna label
			var vienna = new ol.Overlay({
				position: pos,
				element: document.getElementById('vienna')
			});
			map.addOverlay(vienna);
			 // Popup showing the position the user clicked
			var popup = new ol.Overlay({
				element: document.getElementById('popup')
			});
			map.addOverlay(popup);
			map.on('click', function(evt) {
				var element = popup.getElement();
				var coordinate = evt.coordinate;
				var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
					coordinate, 'EPSG:3857', 'EPSG:4326'));
				$(element).popover('destroy');
				popup.setPosition(coordinate);
				// the keys are quoted to prevent renaming in ADVANCED mode.
				$(element).popover({
					'placement': 'top',
					'animation': false,
					'html': true,
					'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
				});
				$(element).popover('show');
			});
		</script>
	</body>

</html>